<template>
  <el-col :span="24">
    <div id="Chart1" style="height: 100vh"></div>
  </el-col>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Test",
  mounted() {
    this.draw1()
  },
  methods: {
    draw1() {
      const dat = this.$author
      let myChart = this.$echarts.init(document.getElementById('Chart1'), 'chalk')
      myChart.setOption({
        tooltip: {},
        // legend: [
        //   {
        //     data: dat.categories.map(function (a) {
        //       return a.name;
        //     })
        //   }
        // ],
        toolbox: {
          feature: {
            saveAsImage: {}
          },

        },
        textStyle: {
          fontSize: 40
        },
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            name: '主题词',
            type: 'graph',
            layout: 'none',
            data: dat.nodes,
            links: dat.links,
            categories: dat.categories,
            roam: true,
            label: {
              show: true,
              position: 'right',
              formatter: '{b}'
            },
            labelLayout: {
              hideOverlap: true
            },
            scaleLimit: {
              min: 0.4,
              max: 2
            },
            lineStyle: {
              color: 'source',
              curveness: 0.3
            },
            emphasis: {
              focus: 'adjacency',
              lineStyle: {
                width: 20
              }
            }
          }
        ]
      })
    },
  }
}
</script>

<style scoped>

</style>